<template>
  <div class="">
    <form>
      <!--          个人基本信息-->
      <div class="border-bottom mb-4">
        <label class="" style="color: #0f5da2;font-size: 20px;font-weight: bold">个人基本信息（*为必填）</label>
      </div>
      <div class="form-group">
        <label for="inputUsername">
          <span style="color: #a11918;font-weight: bold;font-size: 20px">* </span>
          用户名
        </label>
        <input type="text" class="form-control " id="inputUsername" v-model="PersonBasic.user_name" required>
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputBirthday">出生日期</label>
          <input type="date" class="form-control" id="inputBirthday" v-model="PersonBasic.birthday">
        </div>
        <div class="form-group col-md-6">
          <label for="inputSex">性别</label>
          <select  class="form-control" id="inputSex" v-model="PersonBasic.sex">
            <option selected>男</option>
            <option>女</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputEmail">邮箱</label>
          <input type="email" class="form-control" id="inputEmail" v-model="PersonBasic.email">
        </div>
        <div class="form-group col-md-6">
          <label for="inputCity">籍贯</label>
          <input type="text" class="form-control" id="inputCity" v-model="PersonBasic.city">
        </div>
      </div>
      <div class="form-group">
        <label for="inputHobby">爱好</label>
        <input type="text" class="form-control " id="inputHobby" v-model="PersonBasic.hobby">
      </div>
      <div class="form-group">
        <label for="inputProfile">个人介绍</label>
        <textarea class="form-control" id="inputProfile" placeholder="简单介绍下自己吧~~"  v-model="PersonBasic.profile"></textarea>
        <small id="InfoHelp" class="form-text text-muted">
          （1-200字）
        </small>
      </div>
      <div class="btn-group" role="group">
        <button type="submit" class="btn mt-4" style="background-color: #B7C1AC;color: white" @click="updateSave">保存信息</button>
      </div>
      <div class="btn-group ml-4" role="group">
        <button type="submit" class="btn mt-4" style="background-color: #B7C1AC;color: white" @click="clearInput">重&nbsp;&nbsp;置</button>
      </div>
    </form>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {getUser_Basic,updateUser_Basic} from "@/api/User";



export default {
  name: "person_basic",
  data(){
    return{
      // 上传头像地址
      imageUrl:'',
      PersonBasic:{
        user_name:'',
        birthday:'',
        sex:'',
        email:'',
        city:'',
        hobby:'',
        profile:'',
        img:'',

      }
    }
  },
  created() {
    let _this=this;

    _this.init();

  },
  methods:{
    // 获取当前用户个人信息
    init(){
      getUser_Basic({
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        this.PersonBasic.user_name=res.data.username;
        this.PersonBasic.birthday=res.data.birthday;
        this.PersonBasic.city=res.data.city;
        this.PersonBasic.email=res.data.email;
        this.PersonBasic.hobby=res.data.hobby;
        this.PersonBasic.profile=res.data.profile;
        this.PersonBasic.sex=res.data.sex;
      })
    },
  //修改个人基本信息
    updateSave(){
      var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
      if(this.PersonBasic.user_name.length===0){
        this.$msg.warning('用户名不能为空！');
        return false;
      }
      if(this.PersonBasic.email != null){
        if(!reg.test(this.PersonBasic.email))
        {
          this.$msg.warning('邮箱格式不正确！');
          return false;
        }
      }
      if(this.PersonBasic.profile!=null){
        if(this.PersonBasic.profile.length>200){
          this.$msg.warning('个人介绍不能超过200字！');
          return false;
        }
      }
      if(this.PersonBasic.hobby!=null){
        if(this.PersonBasic.hobby.length>50){
          this.$msg.warning('爱好不能超过50字！');
          return false;
        }
      }
      updateUser_Basic({
        PersonBasic:this.PersonBasic,
        user_name:this.PersonBasic.user_name,
        // token: window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code==1){
          this.$msg.success('修改成功！');
          Cookies.set('currentUserName',this.PersonBasic.user_name);
        }else if(res.data.code==-1){
          this.$msg.warning('用户名已存在！');
          this.PersonBasic.username="";
        }
        else{
          this.$msg.error('修改失败！');
        }
        this.init();
      })

    },
  //重置  清空输入框
    clearInput(){
      this.PersonBasic.username="";
      this.PersonBasic.birthday="";
      this.PersonBasic.city="";
      this.PersonBasic.email="";
      this.PersonBasic.hobby="";
      this.PersonBasic.profile="";
    }


  }
}
</script>

<style scoped>
.form-group{
  padding:6px;
}


</style>
